OpenLayers的点击事件

您所在的位置:网站首页 openlayer3 图标更换 OpenLayers的点击事件

OpenLayers的点击事件

2024-07-15 12:16| 来源: 网络整理| 查看: 265

OpenLayers的点击事件是附加在整个ol.Map对象上的:

var selectSingleClick = new ol.interaction.Select(); map.addInteraction(selectSingleClick); selectSingleClick.on('select', function(e) { var features = e.target.getFeatures().getArray(); if(features.length > 0) { console.log(features[0].values_); } });

点击事件是通过点击具体的Feature触发的,点击底图并不会触发点击事件。

点击事件触发后,就会执行上面的回调函数。可以在回调函数中执行需要进行的操作。

然而,该事件是针对整个ol.Map对象。所以对于不同的Feature,都会触发上面同一个回调。那么,若不同的Feature所需要的回调逻辑不同,这样就得做条件处理。

例如,点击一个点,弹窗提示点的位置;点击一个圆,弹窗提示圆的半径。

于是在上面的if条件中,就可以加个switch来判断当前点击的是点还是圆(例如通过id来判断),然后做对应的处理。

这样处理最为直观,但烦琐且工作量大。设区别图形是使用id,那么有一万个图形,switch中就需要出现一万个条件。于是考虑到,是否可以将点击图形的回调和参数传入,点击某个Feature,就触发该Feature自己的回调。

对于回调参数e,有个属性values_。该属性是定义Feature时传入的参数。

例如,定义点Feature:

new ol.Feature({ geometry: new ol.geom.Point(coordinate) })

打印点击事件的values_属性:

console.log(features[0].values_);

控制台会输出:

{ geometry: {...} }

也就是说,Feature创建时的参数会被放入values_属性中。所以在Feature创建时附加data参数:

new ol.Feature({ geometry: new ol.geom.Point(coordinate), data: { callback: function(params) { console.log(params); }, callbackParams: {} } })

打印点击事件的values_属性:

{ geometry: {...}, data: { callback: function(params) { console.log(params); }, callbackParams: {} } }

所以,在处理Map的点击时:

selectSingleClick.on('select', function(e) { var features = e.target.getFeatures().getArray(); if(features.length > 0) { var data = features[0].values_.data; if(data.callback) { data.callback(e, data.callbackParams); } } });

这样,就会执行该Feature自己的回调函数。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3